<template>
  <div class="machine-detail">
    <h2>机器详情</h2>
    <el-card class="detail-card" shadow="always">
      <div class="card-content">
        <div class="info-item"><strong>机器编号:</strong> {{ machine?.number }}</div>
        <div class="info-item"><strong>机器名称:</strong> {{ machine?.name }}</div>
        <div class="info-item"><strong>类型:</strong> {{ machine?.type }}</div>
        <div class="info-item">
          <strong>状态:</strong>
          <el-select v-model="machine.status" v-if="isEditing" placeholder="请选择状态" style="width: 120px;">
            <el-option label="正常" value="NORMAL" />
            <el-option label="故障" value="FAULT" />
            <el-option label="维护中" value="MAINTENANCE" />
          </el-select>
          <el-tag v-else :type="getStatusTagType(machine?.status)">
            {{ machine?.status === 'NORMAL' ? '正常' : machine?.status === 'FAULT' ? '故障' : '维护中' }}
          </el-tag>
        </div>
        <div class="info-item">
          <strong>使用次数:</strong>
          <el-input-number v-model="machine.usageCount" :min="0" v-if="isEditing" style="width: 120px;" />
          <span v-else>{{ machine?.usageCount }}</span>
        </div>
        <div class="info-item"><strong>拥有者ID:</strong> {{ machine?.ownerId }}</div>
        <div class="info-item"><strong>注册时间:</strong> {{ machine?.registerTime }}</div>
        <div class="info-item">
          <strong>图片:</strong>
          <el-image :src="machine?.url" style="width: 100px; height: 100px;" fit="cover" v-if="machine?.url" />
          <span v-else>无图片</span>
        </div>
      </div>
    </el-card>
    <div class="actions">
      <el-button type="primary" @click="toggleEdit" v-if="!isEditing">修改</el-button>
      <el-button type="primary" @click="handleUpdate" v-if="isEditing">更新</el-button>
      <el-button type="danger" @click="handleDelete">删除</el-button>
      <el-button @click="$router.back()">返回</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useMachineStore } from '@/stores/machine';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const machineStore = useMachineStore();

const machine = ref<any>(null);
const isEditing = ref(false);

onMounted(() => {
  const id = Number(route.params.id);
  machine.value = machineStore.machines.find(m => m.id === id);
  if (!machine.value) {
    ElMessage.error('机器不存在');
    router.push('/machine/info');
  }
});

const toggleEdit = () => {
  isEditing.value = true;
};

const handleUpdate = async () => {
  try {
    await machineStore.updateMachine(machine.value);
    ElMessage.success('更新成功');
    isEditing.value = false;
  } catch (error) {
    ElMessage.error('更新失败');
    console.error(error);
  }
};

const handleDelete = () => {
  ElMessageBox.confirm('确定删除此机器吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    await machineStore.deleteMachine(machine.value.id);
    ElMessage.success('删除成功');
    router.push('/machine/info');
  }).catch(() => {
    ElMessage.info('取消删除');
  });
};

const getStatusTagType = (status: string) => {
  return status === 'NORMAL' ? 'success' : status === 'FAULT' ? 'danger' : 'warning';
};
</script>

<style scoped>
.machine-detail {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.detail-card {
  border-radius: 8px;
}

.card-content {
  padding: 10px;
}

.info-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.info-item strong {
  width: 100px;
  color: #606266;
  flex-shrink: 0;
}

.actions {
  margin-top: 20px;
  text-align: center;
}
</style>